<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>移动双录文件管理</title>
	<meta name="decorator" content="default"/>

	<script type="text/javascript" src="${path}/static/jquery/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="${path}/js/common/bootstrap.min.js"></script>

	<link rel="stylesheet" type="text/css" href="${path}/css/common/bootstrap.min.css"/>
	<!-- 播放器样式 -->
	<link rel="stylesheet" type="text/css" href="${path}/css/common/video-js.css"/>
	<!-- video.js must be in the <head> for older IEs to work. -->
	<script type="text/javascript" src="${path}/js/common/video.js"></script>
	<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
	<script>
		videojs.options.flash.swf = "video-js.swf";
	</script>

	<style type="text/css">
		.navbar {
			position: relative;
			list-style: none;
			background: #2894FF;
			font-weight: 400;
			font-size: 0;
			text-transform: uppercase;
			display: inline-block;
			padding: 0;
			width: 100%;
		}

		.icon {
			font-size: 30px;
			padding: 15px 20px;
			color: #FDFFFF;
			margin-left: 15px;
			font-weight: bold;
			font-style: italic;
		}

		.navbar li {
			font-family: "微软雅黑", serif;
			font-size: 18px;
			display: inline-block;
			position: relative;
			margin-left: 15px;
			cursor: pointer;
			z-index: 5;
			color: #FDFFFF;
			margin-top: 20px;
		}

		li {
			margin: 0;
		}

		.sidemenu {
			font-family: "微软雅黑", serif;
			font-size: 15px;
			color: #FDFFFF;
			position: relative;
		}

		.sidemenu li {
			margin-top: 10px;
		}

		.btons {
			margin-top: 15px;
		}

		.info {
			margin-top: 30px;
			margin-left: 50px;
		}

		.infot {
			margin-left: 75px;
		}

		.table th, .table td {
			text-align: center;
		}
	</style>

	<script type="text/javascript">
		$(document).on('click', '.vjs-fullscreen-control', function () {
			if ($("#example_video_1").hasClass("vjs-fullscreen")) {
				$("#example_video_1").removeClass("vjs-fullscreen");
			} else {
				$("#example_video_1").addClass("vjs-fullscreen");
			}
		});
	</script>
</head>
<body>
<ul class="nav nav-tabs">
	<li ><a href="${ctx}/mobile/mobileFile/">移动双录文件列表</a></li>
	<li class="active"><a href="${ctx}/mobile/mobileFile/form">视频播放</a></li>
</ul>
<form:form id="inputForm" modelAttribute="mobileFile" action="${ctx}/mobile/mobileFile/save" method="post" class="form-horizontal">
	<form:hidden path="id"/>
	<table border="0" cellspacing="0" cellpadding="0" align="center" style="margin-top:10px; margin-bottom:10px;">
		<tr>
			<td align="center" id="progressPersent" style="font-size: 14px ;font-weight:bold ;" >播放视频：${mobileFile.name}</td>
		</tr>
	</table>
	<div class="weiyi" id="weiyi">aaa</div>
	<div class="col-lg-8 col-md-8 col-xs-8 col-sm-8" style="margin-top:30px; margin-bottom: 30px;">

		<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none"
			   width="600" height="360"
			   poster="http://video-js.zencoder.com/oceans-clip.png"
			   data-setup="{}">
			<source src="${path}${mobileFile.urlDecrypt}" type='video/mp4'/>
				<%--<source src="${path}/userfiles/a21df1126c714b8a8fb0fc471ab45b38.mp4" type='video/mp4' />--%>
				<%--<source src="http://139.196.48.196:8787/istep/videoPlay/24fc1f9d521c48bfa8751f997dd4afc5.mp4" type='video/mp4' />--%>
				<%--<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />--%>
				<%--<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />--%>
				<%--<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->--%>
				<%--<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->--%>
		</video>

	</div>

	<div class="form-actions">
		<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
	</div>
</form:form>
</body>
</html>



